<template>
  <div class="maintenance-calendar">
    <el-row :gutter="20">
      <!-- 左侧日历 -->
      <el-col :span="16">
        <el-card class="calendar-card">
          <div class="calendar-header">
            <div class="view-options">
              <el-radio-group v-model="viewType" size="small">
                <el-radio-button label="day">日</el-radio-button>
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
              <el-button type="success" size="small">今天</el-button>
            </div>
            <div class="date-picker">
              <el-date-picker v-model="currentDate" type="month" size="small" format="yyyy年 MM月" value-format="yyyy-MM">
              </el-date-picker>
            </div>
            <div class="navigation">
              <el-button icon="el-icon-arrow-left" size="small"></el-button>
              <el-button icon="el-icon-arrow-right" size="small"></el-button>
            </div>
          </div>

          <el-calendar v-model="currentDate">
            <template slot="dateCell" slot-scope="{date, data}">
              <div class="calendar-cell">
                <span>{{ data.day.split('-')[2] }}</span>
                <div v-if="hasTask(data.day)" class="task-indicator" :class="getTaskClass(data.day)">
                  任务
                </div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>

      <!-- 右侧任务详情 -->
      <el-col :span="8">
        <el-card class="task-card">
          <div slot="header">
            <span>计划任务详情</span>
          </div>
          <div class="task-header">
            <div class="task-title">
              计划任务 (3/10)
              <span class="task-date">2024年12月24日 星期二</span>
            </div>
          </div>

          <div class="task-list">
            <div v-for="(task, index) in tasks" :key="index" class="task-item">
              <div class="task-name">{{ task.name }}</div>
              <div class="task-status" :class="getStatusClass(task.status)">
                {{ task.status }}
              </div>
              <div class="task-type">{{ task.type }}</div>
              <div class="task-time">{{ task.time }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MaintenanceCalendar',
  data() {
    return {
      viewType: 'month',
      currentDate: new Date(),
      tasks: [
        {
          name: '电机轴承润滑',
          status: '待执行',
          type: '保养项目（5项）',
          time: '在08:00-10:00执行'
        },
        {
          name: '变压器油位检查',
          status: '已完成',
          type: '保养项目（5项）',
          time: '在08:00-10:00执行'
        },
        // ... 更多任务
      ]
    }
  },
  methods: {
    hasTask(day) {
      // 判断该日期是否有任务
      return true
    },
    getTaskClass(day) {
      // 根据任务状态返回样式类
      return 'pending'
    },
    getStatusClass(status) {
      const classMap = {
        '待执行': 'status-pending',
        '已完成': 'status-completed',
        '保养中': 'status-in-progress',
        '待验收': 'status-waiting',
        '延期': 'status-delayed'
      }
      return classMap[status] || ''
    }
  }
}
</script>

<style scoped>
.maintenance-calendar {
  padding: 20px;
}

.calendar-card,
.task-card {
  margin-bottom: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-cell {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px;
}

.task-indicator {
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  margin-top: 4px;
}

.task-header {
  margin-bottom: 20px;
}

.task-title {
  font-size: 16px;
  font-weight: bold;
}

.task-date {
  float: right;
  color: #909399;
  font-size: 14px;
  font-weight: normal;
}

.task-list {
  max-height: 600px;
  overflow-y: auto;
}

.task-item {
  padding: 12px;
  border-bottom: 1px solid #EBEEF5;
}

.task-name {
  font-weight: bold;
  margin-bottom: 8px;
}

.task-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  margin-bottom: 4px;
}

.status-pending {
  color: #E6A23C;
  background-color: #FDF6EC;
}

.status-completed {
  color: #67C23A;
  background-color: #F0F9EB;
}

.status-in-progress {
  color: #409EFF;
  background-color: #ECF5FF;
}

.status-waiting {
  color: #909399;
  background-color: #F4F4F5;
}

.status-delayed {
  color: #F56C6C;
  background-color: #FEF0F0;
}

.task-type,
.task-time {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .maintenance-calendar {
    padding: 10px;
  }

  .el-col {
    width: 100% !important;
  }
}
</style>
